@import "../../app/variable.less";
.wl-btns{
    position: absolute;
    left: 0;
    bottom: 2vh;
    z-index: @zx10;
    width: 100%;
    height: 6vh;
    .fh1();
    .btn-box{
        position: relative;
        width: 0;
        height: 0;
        cursor: pointer;
        background-image: url(../../../public/images/btn.png);
        opacity: 0;
        background-repeat: no-repeat;
        background-size: 100%;
        transition: all 0.3s ease-in-out;
        &:hover, &.active{
            transition: none;
            background-image: url(../../../public/images/btn-selected.png);
            // background-position: 0 -1vh;
            .icon-flower{
                opacity: 1;
            }
        }
        &.visible{
            width: 18vh;
            height: 10vh;
            opacity: 1;
        }
        &.mlr{
            margin: 0 8vh;
        }
        .btn{
            width: 100%;
            height: 7.5vh;
            color: @cr-white;
            background: transparent;
            outline: none;
            border: none;
            font-size: 1.8vh;
            font-family: "HXBhandsome";
            margin-top: -1.3vh;
            text-align: center;
            cursor: pointer;
            &.btn-ls{
                text-indent: 2vh;
                letter-spacing: 2vh;
            }
        }
        .icon-flower{
            position: absolute;
            left: 2vh;
            top: -2vh;
            z-index: @zx01;
            width: 6vh;
            height: 3vh;
            background-image: url(../../../public/images/flower.png);
            opacity: 0;
            .bg-cover();
        }
    }
}
